<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>写博客</title>
	<link rel="shortcut icon" href="../img/title.png"/>
	<script src="../js/jquery.min.js"></script>
	<link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css"> 
	<script src="../bootstrap-3.3.7-dist/js/bootstrap.js"></script>
	<link rel="stylesheet" href="../summernote/summernote.css"> 
	<script src="../summernote/summernote.js"></script>
	<script src="../summernote/lang/summernote-zh-CN.js"></script>
	<style type="text/css">
		body {
			background-image: url(../img/background.jpg);
			background-position: center center;
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
			color:#fff;
			position: relative;
}
		.mybody{
			margin: 0px auto;
			width: 58%;
			background: #eee;
			color: #000;
			padding: 30px;
			border-radius: 6px;
			margin-top: 20px;
		}
		.myinput{
			width: 100%;
			height: auto;
			font-size:18px;
			padding: 5px;
			margin: 20px 0 20px 0;
			background: #fff;
			font-family: '宋体';
			color: #000;
			border-radius: 6px;
			border: 1px solid #EEEEE0;
		}
		#mybutton{
			margin: 35px 0px 35px 0px; 
			margin-right: 30px;
		}
		.mytext{
			font-size: 18px;
			}
			.btn-link{
				text-align: left;
			}
			.summernote{
				border-radius: 6px;
			border: 1px solid #eee;
			}
			select, textarea {
			height: 28px;
			border: 1px solid #C5C1AA;
			}
			.btn-link,.btn-link:hover{
				font-size: 14px;
				text-decoration:none;
			}
			.btn-link:visited{
			text-decoration:none;
			}
	</style>
</head>
<body>
	<div class="mybody">
	<div style="float: left;">
			<img alt="" src="../img/title.png" style="width: 80px;height: 80px;">
		</div>
		<div class="conption">
			<h2 style="color: #000; text-align: right;padding-top: 20px;font-family: '隶书'">书写人生</h2>
       </div>
		<form action="">
			<input type="text" placeholder="请输入文章标题" class="myinput">
			<textarea id="summernote" class="summernote"></textarea>
			<p>
			<label class="mytext">文章类型：</label>
				<input class="btn btn-link" placeholder="+ 添加自定义" type="text" value=""  id="customBlogType">
			<label class="mytext">已有类型：</label>
				<select name="type"id="blogType"style="width: 200px;">
					<option  value="" style="display: none"></option>		
					<option th:each="t:${types}" th:value="${t.id}"th:text="${t.type}"></option>
				</select>
			</p>
			<p>
			<label  class="mytext">是否公开：</label>
				<input type="radio" name="optionsRadios"  value="是" checked> 公开&emsp;
				<input type="radio" name="optionsRadios"  value="否"> 私密
			</p>
		<p style="text-align: center;"><button class="btn btn-danger btn-bg" id="mybutton">发布文章</button>
		<button class="btn btn-link btn-bg" id="returns">返回首页</button></p>
		</form>
	</div>
	
<script>
$(function() {
	$('.summernote').summernote({
		height: '700px',
		tabsize : 2,
		lang : 'zh-CN',
		// 图片上传
		callbacks : {
			// summernote提供的API：onImageUpload
			onImageUpload : function(files) {
				
				var formData = new FormData();
	            formData.append("file", files[0]);
				$.ajax({
					url : 'upload', //后台文件上传接口
					type : 'POST',
					data : formData,
					processData : false,//告诉jQuery不要加工数据
					contentType : false,//告诉jQuery,在request head里不要设置Content-Type
					success : function(data) {
						$("#summernote").summernote('insertImage', data, 'img');
					},
					error : function() {
						alert("上传失败")
					}
				})
			},
            //清除word复制的格式
			onPaste: function (ne) {
                  	var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text/plain');
                   ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);
                   setTimeout(function () {
                        document.execCommand("insertText", false, bufferText);
                   }, 10);
			}
		}
	});
	
	$("#customBlogType").click(function(){
		if(this.value == "")
	    	this.value="";
		else{
			this.value = this.value;
		}
		
	});
	//如果选择了类型，禁用select框
	$('#customBlogType').bind('input propertychange', function(){
		if(this.value != ""){
			 $("#blogType").attr("disabled","true");
			 $("#blogType").val("");
			}
		if(this.value == ""){
				 $("#blogType").removeAttr("disabled");
			}
	});
	
});
	


</script>
</body>
</html>